<template name="myNavigation">
	<view class="topNav" :style="'background:'+background+';color:'+color">
		<image class="back" :style="'left:'+srcLeft+'%'" :src="src" mode="" @click="back"></image>
		<image class="icon" :style="'left:'+src2Left+'%'" :src="src2" mode=""></image>
		<text class="title">
			{{title}}
		</text>
	</view>
</template>

<script>
	export default {
		props:{
			src:{
				type:String,
				default:function(){
					return ""
				}
			},
			srcLeft:{
				type:String,
				default:function(){
					return '5'
				}
			},
			src2:{
				type:String,
				default:function(){
					return ""
				}
			},
			src2Left:{
				type:String,
				default:function(){
					return '14'
				}
			},
			title:{
				type:String,
				default:function(){
					return ""
				}
			},
			background:{
				type:String,
				default:function(){
					return ""
				}
			},
			color:{
				type:String,
				default:function(){
					return ""
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			back(){
				uni.navigateBack({})
			}
		}
	}
</script>

<style lang="less">
.topNav{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	color: #000000;
	width: 100%;
	height: 11vh;
	background: #32A238;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	.back{
		width: 24px;
		height: 24px;
		position: absolute;
		top: 50%;
		z-index: 10;
		left: 5%;
	}
	.icon{
		width: 33px;
		height: 33px;
		position: absolute;
		top: 45%;
		z-index: 10;
		left: 14%;
	}
	.title{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		position: absolute;
		top: 50%;
		z-index: 10;
		left: 50%;
		transform: translate(-50%,0);
	}
}
</style>
